<template>
  <div class="listWapper">
    <customDetailsTopbar :title="name" flag @back="back" />
    <div id="customScroolBox" class="listInner px-1">
      <customSearch ref="customSearch" :placeholder="name==='清洁生产管理'||name==='能源管理体系'?'请输入企业名称':'请输入绿色工厂名称'" :title="name + '列表'" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div v-if="tableList.length" class="common_list">
        <div v-for="(item,index) in tableList" :key="index" class="list_item" @click="goDetail(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                <template>
                  <span v-if="name === '清洁生产管理'">{{ item.entryName }}</span>
                  <span v-else>{{ item.companyName }}</span>
                </template>
                <span v-if="name === '绿色工厂' || name === '零碳工厂'">{{ item.honor }}</span>
              </div>
              <ul class="des-list">
                <li v-for="des,ind in desList" :key="ind" class="des">
                  <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                  <div class="label">{{ des.label }}：</div>
                  <div class="value">{{ item[des.value] }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <template v-if="name === '能源管理体系'">
            <!--            <customPopCheckbox :list="selectOptionAll['企业类别']" :check-value.sync="form.category" title="企业类别" />-->
            <custom-timer :start.sync="form.startTime" :end.sync="form.endTime" title="证书有效期起止时间" />
            <customPopCheckbox :list="selectOptionAll['行业类别-fixed']" :check-value.sync="form.type" title="行业类别" check-all-text="-1" />
            <customPopCheckbox :list="selectOptionAll['能源-是否重点用能单位']" :check-value.sync="form.isEnergy" title="是否重点用能单位" check-all-text="-1" />
          </template>
          <template v-else-if="name === '合同能源管理项目'">
            <!--            <customPopCheckbox :list="selectOptionAll['企业类别']" :check-value.sync="form.type" title="企业类别" />-->
            <custom-timer :start.sync="form.startTime" :end.sync="form.endTime" title="合同起止时间" />
            <div class="checkbox-title">合同能源项目类型：</div>
            <el-select v-model="form.projectType" style="width: 100%;" size="small" placeholder="请选择">
              <el-option v-for="item in projectTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
          <template v-else-if="name === '绿色工厂'">
            <!--            <customPopCheckbox :list="selectOptionAll['企业类别']" :check-value.sync="form.industryTypes" title="企业类别" />-->
            <!--            <customPopCheckbox :list="list" :check-value.sync="form.type" title="类型" />-->
            <customPopCheckbox :list="selectOptionAll['绿色工厂-荣誉级别']" :check-value.sync="form.honorLevels" title="荣誉级别" />
            <custom-timer :start.sync="form.startTime" :end.sync="form.endTime" title="评定日期" />
          </template>
          <template v-else-if="name === '清洁生产管理'">
            <div class="customPopCheckbox">
              <div class="checkbox-title">清洁生产项目名称</div>
              <el-input v-model="form.factoryName" placeholder="请输入清洁生产项目名称" size="small" style="margin-bottom: 10px" />
              <customPopCheckbox :list="selectOptionAll['行业类别-fixed']" :check-value.sync="form.industryTypes" title="行业类别" check-all-text="-1" />
              <custom-timer type="year" title="年份" :is-interval="false" :placeholder="'请选择年份'" :picker-title="'请选择年份'" :date-value="form.years" @update:dateValue="getTime" />
            </div>
            <!--            <customPopCheckbox :list="selectOptionAll['企业类别']" :check-value.sync="form.industryTypes" title="企业类别" />-->
            <customPopCheckbox :list="selectOptionAll['清洁生产-审核类型']" :check-value.sync="form.categorys" title="审核类型" />
          </template>
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { cleanerProductionList, energyCertifyList, greenFactoryList } from '@/api/energySources'
export default {
  mixins: [commonList],
  data() {
    return {
      total: 10,
      form: {
        pageNum: 1,
        pageSize: 10,
        companyName: '',
        factoryName: '',
        category: '',
        endTime: '',
        startTime: '',
        honorLevels: '',
        industryTypes: '',
        type: '',
        categorys: '',
        companyIds: -1,
        years: '',
        isEnergy: ''
      },
      name: '',
      desList: [],
      desListMap: {
        '能源管理体系': [
          // { label: '企业类别', value: 'category', icon: '&#xe790;' },
          { label: '行业类别', value: 'industryType', icon: '&#xe634;' },
          { label: '所在地', value: 'registeAddress', icon: '&#xe87e;' },
          { label: '是否重点用能单位', value: 'isEnergy', icon: '&#xe725;' },
          { label: '证书初领日期', value: 'receiveTime', icon: '&#xe617;' },
          { label: '证书有效期（起）', value: 'certifyStarTime', icon: '&#xe617;' },
          { label: '证书有效期（止）', value: 'certifyEndTime', icon: '&#xe617;' }
        ],
        '清洁生产管理': [
          // { label: '企业类别', value: 'category', icon: '&#xe790;' },
          { label: '企业名称', value: 'companyName', icon: '&#xe634;' },
          { label: '行业类别', value: 'industry', icon: '&#xe634;' },
          { label: '审核类型', value: 'auditType', icon: '&#xe791;' },
          { label: '开始时间', value: 'startTime', icon: '&#xe617;' },
          { label: '结束时间', value: 'endTime', icon: '&#xe617;' }

          // { label: '企业名称', value: 'name', icon: '&#xe790;' },
          // { label: '合同能源项目类型', value: 'grade', icon: '&#xe98f;' },
          // { label: '合同签订金额（万元）', value: 'position', icon: '&#xe69a;' },
          // { label: '合同开始日期', value: 'goods', icon: '&#xe617;' },
          // { label: '合同结束日期', value: 'goods', icon: '&#xe617;' }
        ],
        '绿色工厂': [
          { label: '绿色工厂名称', value: 'factoryName', icon: '&#xe62c;' },
          // { label: '企业类别', value: 'category', icon: '&#xe790;' },
          { label: '所在地', value: 'registeAddress', icon: '&#xe87e;' },
          { label: '行业类别', value: 'industryType', icon: '&#xe634;' },
          { label: '荣誉级别', value: 'honorLevel', icon: '&#xe669;' },
          // { label: '类型', value: 'goods', icon: '&#xe634;' },
          { label: '第三方评价机构', value: 'thirdPartyName', icon: '&#xe725;' },
          { label: '评定日期', value: 'evaluationDate', icon: '&#xe617;' },
          { label: '有效期', value: 'validityTime', icon: '&#xe6a4;' }
        ],
        '零碳工厂': [
          // { label: '企业类别', value: 'name', icon: '&#xe790;' },
          { label: '所在地', value: 'grade', icon: '&#xe87e;' },
          { label: '行业', value: 'position', icon: '&#xe634;' },
          { label: '年份', value: 'goods', icon: '&#xe8d5;' },
          { label: '第三方评价机构', value: 'goods', icon: '&#xe725;' },
          { label: '评定日期', value: 'goods', icon: '&#xe617;' }
        ]
      },
      tableList: [],
      getListFunMap: {
        '能源管理体系': energyCertifyList,
        '清洁生产管理': cleanerProductionList,
        '绿色工厂': greenFactoryList
      },
      listFun: energyCertifyList
    }
  },
  mounted() {
    this.name = this.$route.query.name
    // 如果是绿色工厂需要去掉
    if (this.name === '绿色工厂') {
      delete this.form.category
      delete this.form.industryTypes
      delete this.form.categorys
      delete this.form.companyName
      delete this.form.years
    } else if (this.name === '能源管理体系') {
      delete this.form.companyName
    }
    if (this.name) {
      this.desList = this.desListMap[this.name]
      this.listFun = this.getListFunMap[this.name]
      this.getList()
    }
  },
  methods: {
    back() {
      this.$router.back({
        query: { current: '能源管理' }
      })
    },
    goDetail(item) {
      if (this.name === '能源管理体系' || this.name === '清洁生产管理') {
        this.$router.push({
          path: '/staging/systemManageDetail',
          query: { name: this.name, id: item.id }
        })
      }
    },
    async getList() {
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showLoading()
      const { status, data } = await this.listFun(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this.tableList = this.tableList.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      // this.layout.hideLoading()
    },
    handlePages(value) {
      this.form.pageNum = value
      this.getList()
    },
    handleSearch(value) {
      if (this.name === '能源管理体系') {
        this.form.companyName = value
      } else if (this.name === '清洁生产管理') {
        this.form.companyName = value
      } else if (this.name === '绿色工厂') {
        this.form.factoryName = value
      }
      this.form.pageNum = 1
      this.tableList = []
      this.getList()
    },
    resetSuperSearch() {
      const pageSize = this.form.pageSize
      const pageNum = this.form.pageNum
      Object.keys(this.form).forEach(val => {
        this.form[val] = ''
      })
      // 重置输入框查询
      this.$refs.customSearch.restore()
      this.form.pageSize = pageSize
      this.form.pageNum = pageNum
      this.form.companyIds = -1
    },
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.tableList = []
      this.getList()
    },
    getTime(val) {
      this.form.years = val
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.right_content{
  .des-list{
    display: flex;
    flex-wrap: wrap;
    .des{
      width: 100%;
    }
  }
}
</style>
